<template>
   <div class="collectionList">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onCollectionLoad"
        >
             <van-card
                v-for="(item, index) in collectionList"
                v-bind:key="item"
                @click="$router.push('/goods/detail/' + item.objectId)"
                :title="item.goodsName"
                :desc="`收藏时间: ${item.createTime}`"
                :price="item.goodsCurrentPrice/100"
                :thumb="`/images/${item.goodsImage}`"
            >
             <div slot="footer">
                <van-button  size="mini" @click.stop="cancel(item.objectId, index)">&nbsp;取消收藏&nbsp;</van-button>
            </div>
            </van-card>
        </van-list>
   </div>
</template>

<script>
export default {
    name: 'Collections',
    data() {
        return {
            pageNum: 0,
            total: -1,
            loading: false, //是否正在加载
            finished: false, //是否加载完了
            collectionList: [],
        }
    },

    methods: {
        cancel(id, index) {
            let url = '/shop/goods/front/cancelCollection';
            this.$http.post(url, {goodsId: id}).then(res => {
                if (res.status === 0) {
                    this.$toast.success('取消成功');
                    this.collectionList.splice(index, 1);
                } else {
                    this.$toast.fail(res.message);
                }
            })
        },
        onCollectionLoad() {
            if (this.pageNum >= this.total && this.total !== -1) {
                this.finished = true;
                return;
            }
            this.pageNum++;
            this.getCollection();
        },
       

        getCollection() {
            this.loading = true;
            this.$http.post('/shop/goodsCollection/front/getGoodsCollectionList?', {
                pageSize: 10,
                pageNum: this.pageNum,
            }).then(res => {
                console.log('获取收藏列表数据成功')
                console.log(res)
                if (res.status === 0) {
                    this.loading = false;
                    this.total = res.data.total;
                    this.collectionList = this.collectionList.concat(res.data.rows || []);
                    if (this.pageNum >= this.total && this.total !== -1) {
                        this.finished = true;
                        return;
                    }
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.collectionList { height: 100%; background-color: #fff;}
/deep/ .van-button--mini { width: auto; padding-left: 6px; padding-right: 6px;}
</style>
